<template>
  <div class="user-edit-box">
    <header>用户管理</header>
    <main>
      <el-form :model="obj" :rules="rules" ref="obj" label-width="80px">
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="id" prop="id">
              <el-input v-model="obj.id" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="obj.name" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="obj.email" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="obj.phone" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="用户密码" prop="password">
              <el-input v-model="obj.password" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="地址" prop="address">
              <el-input v-model="obj.address" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="状态" prop="state">
              <el-select v-model="obj.state" placeholder="请选择状态">
                <el-option label="显示" value="1"></el-option>
                <el-option label="不显示" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="obj.sex" placeholder="请选择性别">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="职位" prop="position">
              <el-select
                style="width: 202px"
                v-model="obj.position"
                placeholder="请选择职位"
              >
                <el-option
                  v-for="it in positionArr"
                  :key="it.id"
                  :label="it.name"
                  :value="it.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="权限">
              <el-input
                style="width: 202px"
                v-model="obj.role"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="部门" prop="dept">
              <el-select v-model="obj.dept" placeholder="请选择部门">
                <el-option
                  v-for="it in deptArr"
                  :key="it.id"
                  :label="it.name"
                  :value="it.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="出生年月" prop="birthday">
              <el-date-picker
                @change="birthdayEvt"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                v-model="obj.birthday"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="入职时间" prop="induction">
              <el-date-picker
                type="date"
                @change="inductionEvt"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="obj.induction"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="留言">
              <el-input type="textarea" v-model="obj.remark" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            style="margin-top: 50px"
            type="primary"
            @click="submitForm('enter')"
            >提交</el-button
          >
          <el-button plain @click="submitForm('remove')">取消</el-button>
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>
<script>
import { orgListlApi } from "../../../apis/organApi";
import { roleListApi } from "../../../apis/userApi";
export default {
  data() {
    return {
      imageUrl: "",
      obj: {
        id: "",
        state: "",
        name: "",
        password: "",
        photo: "/photo/user.png",
        sex: "",
        address: "",
        birthday: "",
        induction: "",
        dept: "",
        position: "",
        phone: "",
        email: "",
        role: "",
        remark: "",
      },
      positionArr: [],
      deptArr: [],
      rules: {
        id: [{ required: true, message: "请输入id", trigger: "blur" }],
        position: [{ required: true, message: "请输入id", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
    };
  },
  created() {
    roleListApi().then((d) => {
      this.positionArr = d.data;
    });
    orgListlApi().then((d) => {
      this.deptArr = d.data.rows;
    });
    if (!!this.$route.query.data) {
      this.obj = { ...this.obj, ...this.$route.query.data };
    }
  },
  watch: {
    "obj.position": {
      handler() {
        this.positionArr.map(it => {
          if(it.name === this.obj.position){
           this.obj.role = it.id
          }
        })
      },
    },
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    birthdayEvt(data) {
      this.obj.birthday = data;
    },
    inductionEvt(data) {
      this.obj.induction = data;
    },
    submitForm(type) {
      if (type === "remove") {
        for (let it in this.obj) this.obj[it] = "";
        return;
      }
      let state = 0;
      for (let it in this.obj) {
        if (this.obj[it] === "" && it !== "remark") state = 1;
      }
      if (state === 1) return;
      console.log(this.obj);
      this.$message({
        message: "添加成功",
        type: "success",
      });
      for (let it in this.obj) this.obj[it] = "";
    },
  },
};
</script>
<style lang="less" scoped>
.el-icon-plus {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.avatar-uploader {
  .el-upload:hover {
    border-color: #409eff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.user-edit-box {
  background: #fff;
  height: calc(100% - 48px);
  padding: 10px;
  header {
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
  }
  main {
    height: calc(100% - 48px);
    padding: 20px;
  }
}
</style>